<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <test></test> -->
    <!-- <div class="tdd"></div> -->
    <div class="btn-tools">
      <button @click="clear">清除</button>
      <button @click="back">后退</button>
      <button @click="toImage">生成图片</button>
      <button @click="getBodyFile">body文件</button>
      <button @click="screenShort">截屏</button>
    </div>

    <div class="sign-container">
      <jtCanvas  class="canvas" ref="canvas"></jtCanvas>
      <img :src="src" alt="图片" />
    </div>
    <div class="scroll-cotainer">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
      <p>10</p>
      <p>11</p>
      <p>12</p>
      <p>13</p>
      <p>14</p>
      <p>15</p>
      <p>16</p>
      <p>17</p>
      <p>18</p>
      <p>19</p>
      <p>20</p>
    </div>
  </div>
</template>

<script>
import test from "./components/test.vue";
import jtCanvas from "./components/canvas.vue";
import capture from "./utils/capture";

export default {
  name: "App",
  data() {
    return {
      src: ""
    };
  },
  components: {
    test,
    jtCanvas
  },
  methods: {
    screenShort(){
      capture.capture({target:document.body,justPage:true}).then(res=>{
        console.log(`res is`,res)
      })
    },
    async toImage() {
      const canvas = this.$refs.canvas;
      this.src = await this.$refs.canvas.getImage();
      const form = new FormData()
      form.append('file',await canvas.getFile())
      upFile(form)
    },
    clear() {
      this.$refs.canvas.clear();
    },
    back() {
      const canvas = this.$refs.canvas;
      this.$refs.canvas.back();
    },
    async getBodyFile() {
      const form = new FormData();
      const file = await capture.getImageFile({ target: document.body ,name:'cdd.png',justPage:true})
      console.log(`file is`,file)
      form.set("file",file );
      upFile(form);
    }
  }
};

function upFile(form) {
  return fetch("http://127.0.0.1:3000/upfile", {
    headers: {
      "content-type": "application/form-data"
    },
    mode: "no-cors",
    body: form,
    method: "POST"
  })
    .then(res => res.json())
    .then(res => {
      const data = JSON.stringify(res)
      console.log(`上传`, data);
      return data;
    })
    .catch(err => {
      err = JSON.stringify(err)
      console.error(`上传失败`, err);
      return err;
    });
}
</script>

<style lang="scss">
div {
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  // margin-top: 60px;
  .btn-tools {
    display: flex;
    justify-content: space-around;
  }
  .tdd {
    height: 300px;
    width: 500px;
    background: #000;
  }

  .sign-container {
    display: flex;
    .canvas {
      height: 500px;
      width: 300px;
      border: 1px solid gray;
      @media screen and (max-width: 450px) {
        height: 100vw;
        width: 100%;
      }
    }
  }
}
</style>
